<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-model-item label="项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId">
              <j-dict-select-tag
                type="list"
                v-model="model.equipmentId"
                dictCode="yks_equipment,name,id"
                placeholder="请选择项目"
                disabled
              />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="运维类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="devopsPersontype">
              <j-dict-select-tag
                type="list"
                v-model="model.devopsPersontype"
                dictCode="devops_persontype"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
              <a-form-model-item label="运维人员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenancePerson">
                <j-dict-select-tag type="list" v-model="model.maintenancePerson" dictCode="sys_user,username,id" placeholder="请选择运维人员" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="运维部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenanceDept">
                <j-dict-select-tag type="list" v-model="model.maintenanceDept" dictCode="sys_depart,depart_name,id" placeholder="请选择运维部门" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="触发类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="triggerType">
                <j-dict-select-tag type="list" v-model="model.triggerType" dictCode="trigger_type" placeholder="请选择触发类型" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="初次触发时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="triggerTime">
                <j-date placeholder="请选择初次触发时间" v-model="model.triggerTime"  style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="重复次数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repeatNumber">
                <a-input v-model="model.repeatNumber" placeholder="请输入重复次数"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="重复间隔" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repeatGap">
                <a-input v-model="model.repeatGap" placeholder="请输入重复间隔"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="重复间隔单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repeatGapUnit">
                <j-dict-select-tag type="list" v-model="model.repeatGapUnit" dictCode="yks_unit,name,id" placeholder="请选择重复间隔单位" />
              </a-form-model-item>
            </a-col> -->
          <a-col :span="24">
            <a-form-model-item
              label="下次计划保养时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="maintenancePlanTime"
            >
              <j-date placeholder="" v-model="model.maintenancePlanTime" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="24">
              <a-form-model-item label="保养时间段开始" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenanceQuantumstart">
                <j-date placeholder="请选择保养时间段开始" v-model="model.maintenanceQuantumstart"  style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="保养时间段结束" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenanceQuantumend">
                <j-date placeholder="请选择保养时间段结束" v-model="model.maintenanceQuantumend"  style="width: 100%" />
              </a-form-model-item>
            </a-col> -->
          <!-- <a-col :span="24">
            <a-form-model-item label="保养类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenanceType">
              <j-dict-select-tag
                type="list"
                v-model="model.maintenanceType"
                dictCode="maintenance_type"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="保养内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenanceContext">
              <a-input v-model="model.maintenanceContext" placeholder="" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="保养明细" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="templateId">
              <j-multi-select-tag
                type="list_multi"
                v-model="model.templateId"
                dictCode="yks_maintenance_template,template_name,id"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <div v-for="item in contexts" :key="item.id" style="border: 1px solid #ccc">
              <a-form-model-item label="保养内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="templateContext">
                <div style="display: flex; margin-top: 10px">
                  <a-input v-model="item.name" placeholder="" disabled></a-input>
                </div>

                <div v-for="detail in item.details" :key="detail.id">
                  <!-- <div v-show="detail.controlType == '1'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                      <a-input v-model="detail.controlValue" placeholder=""></a-input>
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '2'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                      <a-textarea v-model="detail.controlValue" rows="4" placeholder="" />
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '3'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                    <a-radio-group v-for="radio in detail.controls" :key="radio.id" v-model="detail.selectids[0]">
                        <a-radio :value="radio.id" >{{radio.value}}</a-radio>
                    </a-radio-group>
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '4'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                    <a-checkbox-group v-for="radio in detail.controls" :key="radio.id" v-model="detail.selectids">
                        <a-checkbox :value="radio.id">{{radio.value}}</a-checkbox>
                    </a-checkbox-group>
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '5'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                      <a-input v-model="detail.controlValue" placeholder=""></a-input>
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '6'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                    <j-date placeholder="请选择化学药剂有效期" v-model="detail.effectiveDate"  style="width: 100%" />
                    <a-radio-group v-for="radio in detail.controls" :key="radio.id" v-model="item.selectType">
                        <a-radio :value="radio.id" @click="change(detail,radio)">{{radio.value}}</a-radio>
                    </a-radio-group>
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '7'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                    <j-date placeholder="请选择运维材料有效期" v-model="detail.effectiveDate"  style="width: 100%" />
                    <a-radio-group v-for="radio in detail.controls" :key="radio.id" v-model="item.selectType">
                        <a-radio :value="radio.id" @click="change(detail,radio)">{{radio.value}}</a-radio>
                    </a-radio-group>
                    </a-form-model-item>
                  </div> -->
                  <MaintenanceTemplateControl :detail="detail" ref="maintenanceTemplateControl" forceRender></MaintenanceTemplateControl>
                </div>
              </a-form-model-item>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>
  
  <script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import YksMaintenanceTemplateDetailForm from './YksMaintenanceTemplateDetailForm.vue'
import MaintenanceTemplateControl from './MaintenanceTemplateControl.vue'

export default {
  name: 'YksEquipmentDevopsHistoryForm',
  components: {
    YksMaintenanceTemplateDetailForm,
    MaintenanceTemplateControl
},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        // name: [{ required: true, message: '请输入名称!' }],
        // equipmentId: [{ required: true, message: '请输入项目!' }],
        // devopsPersontype: [{ required: true, message: '请输入运维类型!' }],
      },
      url: {
        // add: "/dev/yksEquipmentDevops/add",
        // add: "/dev/yksEquipmentDevopsHistory/add",
        // edit: '/dev/yksEquipmentDevopsHistory/edit',
        queryById: '/dev/yksEquipmentDevops/queryById',
        yksMaintenanceTemplateDetail: {
          list: '/dev/yksMaintenanceTemplate/queryYksMaintenanceTemplateDetailByMainId',
        },
      },
      contexts: [],
      selectValue:''
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    change(detail,control){
        detail.selectid=control.id
    },
 
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      debugger
      this.contexts=JSON.parse(record.maintenanceItem)
      // for(var i=0;i<this.contexts.length;i++){
      //   for(var j=0;j<this.contexts[i].details.length;j++){
      //     let detail=this.contexts[i].details[j];
      //     if(detail.controlType=='3'||detail.controlType=='4'){
      //       for(var k=0;k<detail.controls.length;k++){
      //         if(detail.selectids.indexOf(detail.controls[k].id)<0){
      //           // detail.controls.splice(k,1)
      //         }
      //       }
      //     }
      //   }
      // }
      this.model = Object.assign({}, record)
      // let templateids = this.model.templateId.split(',')
      // for (var i = 0; i < templateids.length; i++) {
      //   let params = { id: templateids[i] }
      //   this.loadDetailData(params)
      // }

      this.visible = true
    },
    submitForm() {
        debugger
      const that = this
      let valid=true
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
        //   if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
        //   } else {
        //     httpurl += this.url.edit
        //     method = 'put'
        //   }
         this.model.devopsId=this.model.id
          this.model.maintenanceItem=JSON.stringify(this.contexts)
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      }
      )
    },
    loadDetailData(params) {

      // getAction(this.url.yksMaintenanceTemplateDetail.list, params)
      //   .then((res) => {
      //     if (res.success) {
      //       let listContexts = res.result.filter((p) => p.extText == 'context')
      //       for (var i = 0; i < listContexts.length; i++) {
      //         let context = {}
      //         context.id = listContexts[i].id
      //         context.name = listContexts[i].name
      //         context.extText = listContexts[i].extText
      //         context.extText1 = listContexts[i].extText1
      //         this.contexts.push(context)
      //       }

      //       for (var i = 0; i < this.contexts.length; i++) {
      //         this.contexts[i].details = res.result.filter(
      //           (p) => p.extText == 'control' && p.extText1 == this.contexts[i].extText1
      //         )
      //         for (var j = 0; j < this.contexts[i].details.length; j++) {
      //           let detail = this.contexts[i].details[j]
      //           if (detail.controlType == '3' || detail.controlType == '4') {
      //             detail.controls = JSON.parse(detail.controlValue)
      //             detail.controlValue = ''
      //             for(var k=0;k<detail.controls;k++){
      //               detail.contorls[k].IsChecked=false
      //             }
      //           //   detail.contorls.foreach(p=>p.IsChecked=false)

      //           }
      //         }
      //       }
      //       //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
      //       // this.dataSource = res.result.records||res.result;
      //       // if(res.result.total)
      //       // {
      //       //   this.ipagination.total = res.result.total;
      //       // }else{
      //       //   this.ipagination.total = 0;
      //       // }
      //       //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
      //     } else {
      //       this.$message.warning(res.message)
      //     }
      //   })
      //   .finally(() => {
      //     this.loading = false
      //   })
    },
    saveDevops(){
        let that=this
        let valid=true
        if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            this.model.maintenanceItem=JSON.stringify(this.contexts)
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
    },
    // formDevopsData(){
    //     let devopsItems
    //     for(var i=0;i<this.contexts.length;i++){

    //     }
    // }
  },
}
</script>